<template>
  <div>
    <app-header />
    <div class="container page-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
          <div class="post-list">
            <div v-if="loading" class="loading-container">
              <el-skeleton :rows="3" animated />
              <el-skeleton :rows="3" animated class="mt-20" />
            </div>
            <template v-else>
              <post-card v-for="post in posts" :key="post.id" :post="post" />
              <div v-if="posts.length === 0" class="empty-state">
                暂无博客内容
              </div>
              <el-pagination
                v-if="posts.length > 0"
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
                class="pagination"
              />
            </template>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
          <div class="sidebar">
            <div class="card about-card">
              <h3>关于博客</h3>
              <p>这是一个使用 Vue 3 + Element Plus 构建的个人博客平台，记录学习和生活点滴。</p>
            </div>
            <div class="card categories-card">
              <h3>分类</h3>
              <ul class="category-list">
                <li v-for="category in categories" :key="category.id">
                  <a href="#" @click.prevent="filterByCategory(category.id)">
                    {{ category.name }} ({{ category.count }})
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import AppHeader from '../components/app-header.vue'
import PostCard from '../components/post-card.vue'

const posts = ref([])
const loading = ref(true)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const categories = ref([])

const fetchPosts = async () => {
  loading.value = true
  try {
    const response = await axios.get('/api/posts', {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value
      }
    })
    posts.value = response.data.posts
    total.value = response.data.total
  } catch (error) {
    console.error('Failed to fetch posts:', error)
  } finally {
    loading.value = false
  }
}

const fetchCategories = async () => {
  try {
    const response = await axios.get('/api/categories')
    categories.value = response.data
  } catch (error) {
    console.error('Failed to fetch categories:', error)
  }
}

const handlePageChange = (page) => {
  currentPage.value = page
  fetchPosts()
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const filterByCategory = (categoryId) => {
  console.log('Filter by category:', categoryId)
  // Implement category filtering logic here
  // This would typically involve updating the API request with a category parameter
}

onMounted(() => {
  fetchPosts()
  fetchCategories()
})
</script>

<style lang="less" scoped>
.loading-container {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 16px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.sidebar {
  .about-card, .categories-card {
    h3 {
      margin-top: 0;
      margin-bottom: 15px;
      font-size: 18px;
      color: #303133;
    }
  }
  
  .categories-card {
    margin-top: 20px;
  }
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  
  li {
    margin-bottom: 8px;
    
    a {
      color: #606266;
      text-decoration: none;
      
      &:hover {
        color: #409eff;
      }
    }
  }
}

// Responsive adjustments
@media (max-width: 768px) {
  .sidebar {
    margin-top: 20px;
  }
}
</style>

